  .router-view-page {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .router-view-unmount-page{
    transform: translateX(-100%);
  }
  .router-view-forward-enter {
    opacity: 0;
    transform: translateX(-100%);
  }
  
  .router-view-forward-enter-active {
    opacity: 1;
    transform: translateX(0%);
    transition: opacity 500ms, transform 500ms;
  }
  
  .router-view-forward-exit {
    opacity: 1;
    transform: translateX(0%);
  }
  
  .router-view-forward-exit-active {
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 500ms, transform 500ms;
  }
  
  .router-view-forward-enter-done{
    transform: translateX(0%);
  }

  .router-view-back-enter {
    opacity: 0;
    transform: translateX(100%);
  }
  
  .router-view-back-enter-active {
    opacity: 1;
    transform: translateX(0%);
    transition: opacity 500ms, transform 500ms;
  }
  
  .router-view-back-exit {
    opacity: 1;
    transform: translateX(0%);
  }
  
  .router-view-back-exit-active {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 500ms, transform 500ms;
  }
  
  .router-view-back-enter-done{
    transform: translateX(0%);
  }